<template>
    <el-dialog :title="editPaymentTitle" :visible.sync="$store.state.payment.showPaymentDialog"
               center width="600px">

        <el-form :model="payment" :rules="rules" :label-position="$store.labelPosition"
                 label-width="30%" ref="payment">
            <el-row>
                <el-col  :span="20">
                    <el-form-item label="付款金额：" prop="paid">
                        <el-input-number v-model="payment.paid"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col  :span="20">
                    <el-form-item label="付款日期：" prop="paidDt">
                        <el-date-picker type="date" placeholder="付款日期" v-model="payment.paidDt"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="hideEditDialog()">取 消</el-button>
            <el-button type="primary" @click="savePayment()" >确 定</el-button>
        </div>

    </el-dialog>

</template>

<script>
    import { mapState } from 'vuex'
    import {validateNumber} from '@/util/rules'

    export default {
        name: "PaymentEdit",

        data() {
            return {
                rules:{
                    paid:[{ validator: validateNumber , required: true, message: '请输入金额', trigger: 'blur' }],
                    paidDt:[{ required: true, message: '请输入收款日期', trigger: 'blur' }],
                }
            }
        },

        computed: {
            ...mapState({
                payment: state => state.payment.payment,
            }),

            editPaymentTitle(){
                return this.payment.id > -1 ? "编辑收款" : "增加收款";
            }
        },

        methods: {
            savePayment(){
                this.$refs['payment'].validate((valid) => {
                    console.log("表单验证：", valid);
                    if (valid) {
                        if(this.payment.id  === -1 ){
                            this.addPayment();
                        }else{
                            this.editPayment();
                        }


                    } else {
                        console.log('保存收款验证不通过');
                        return false;
                    }
                });
            },

            async addPayment(){
                console.log("payment: ", this.payment)
                await this.$axios.post('/finance/payment', this.payment).then((res) => {
                    this.$myMsg.success('成功创建收款信息。');
                    this.$emit('reload')
                    this.hideEditDialog();
                })
            },

            async editPayment(){
                await this.$axios.put('/finance/payment', this.payment).then((res) => {
                    this.$myMsg.success('成功编辑收款信息。');
                    this.$emit('reload')
                    this.hideEditDialog();
                })

            },

            hideEditDialog(){ // 关闭弹出窗口
                this.$store.commit("payment/Hide_Payment_Dialog");
            }
        }
    }
</script>

